<template>
    <div class="clothesGoods">
          <!-- 返回按钮 -->
          <a @click="backto" class="backGo"><i class="iconfont icon-fanhui"></i> 返回</a>
                   <!-- 商品顶部信息展示 -->
                   <div class="clothes_top_show">
                           <img  v-lazy="data.firstImage" alt="" class="clothes_top_show_img">
                        <!-- 商品售卖信息 -->
                           <div class="clothe_detail">
                                  <h2>{{data.sex}}</h2>
                                  <h1>{{data.name}}</h1>
                                  <p><i class="iconfont icon-jiage price_icon"></i>{{data.price}}</p>
                                    <div class="smallimg_border">
                                        <img  v-lazy="data.firstImage" class="smallimg">
                                        <span>{{data.color}}</span>
                                    </div>
                                    <!-- 尺码方块区域 -->
                                    <div class="clothe_size">
                                        <span v-for="(i,index) in data.size" :key="index">{{i}}</span>
                                    </div>
                                  
                                  <button class="clothe_buy">暂未开放购买 <i class="iconfont icon-arrow_left"></i></button>
                           </div>
                   </div>

                   <!-- 商品大图区域 -->
                   <div class="clothe_big_img">
                                                <!-- 区域分割线 -->
                                    <div class="hotSale_line">
                                        <div class="line"> </div>
                                            <h2 class="hotSale_line_text"> 商品详情<i class="iconfont"></i> </h2>
                                        <div class="line"> </div>
                                    </div>
                       <h3>{{data.detail}}</h3>
                       <!-- 这里是图片区域喔 -->
                             <div class="clothe_detail_img" v-for="(img,index) in data.images" :key="index">
                                 <img  v-lazy="img" width="80%" height="80%" >
                             </div>
                   </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    // props:{
    //      "id":String
    // },
          data() {
              return {
                data:{},
                id:this.$route.params.id
              }
          },
          created() {

          },
          mounted(){
              this.getgoods();
            console.log(this.data)
          }
          ,
          methods:{
            //   动态获取json数据
                getgoods(){
                       var Cid =this.id;
                      axios.post('/bagGoods/*',{
                          
                               goodsId:Cid
                          
                      }).then( (res) => {
                           this.data = res.data;
                      })
                }

                       ,backto:function(){
                              this.$router.go(-1);
                       }
              }
          }

</script>

<style>
   .clothesGoods{
       margin-top: 50px;
       width: 100%;
       height: 100%;
   }

   .clothes_top_show{
       margin-top: 40px;
       width: 100%;
       height: 400px;
       background: rgb(229, 245, 245);
       display: flex;
       justify-content: center;
   }
   .clothes_top_show_img{
        width: 330px;
        height: 100%;
   }

   .clothe_detail{
         width: 350px;
         height: 440px;
         position: relative;
         margin-left: 20px;
         top: -30px;
         background: white;
         border-radius: 15px;
         box-shadow: 0 0 30px #9e9e9e;
         padding: 30px;
         text-align: center;
         box-sizing: border-box;
   }
   .clothe_detail h2{
        font-size: 20px;
        color: #888;
        text-align: left;
        margin: 10px;
   }
   .clothe_detail h1{
        font-size: 20px;
        color: #333;
        text-align: center;

   }
   .clothe_detail p{
        text-align: left;
        color: rgb(219, 66, 66);
        font-size: 25px;
        margin: 25px;
   }

   .price_icon{
       font-size: 28px;
       color: #f13232;
       margin-right: 10px;
   }
.smallimg_border{
       width: 100%;
       height: 100px;
       border-top:1px dotted #c8cbcc;
       border-bottom: 1px dotted #c8cbcc;
       text-align: left;
       box-sizing: border-box;

}
.smallimg_border span{
    color: #888;
    margin: 20px;
    font-size: 13px;
    font-family: 'SimHei';

}

   .smallimg{
       padding-top: 5px;
       width: 76px;
       height: 90px;
   }
      /* 添加到购物车按钮 */
   .clothe_buy{
        width: 100%;
        height: 50px;
        background: #79ca8e;
        border: none;
        color: white;
        outline: none;
        border-radius: 10px;
        font-size: 16px;
        transition: all 0.5s;
        font-family: 'SimHei'
   }
   .clothe_buy:hover{
           cursor: pointer;
            background: #f13232;
            box-shadow: 0 0 20px #888;
            

   }

   /* 尺码方块区域 */
   .clothe_size{
       width: 100%;
       height: 50px;
       display: flex;
       justify-content:flex-start;
       flex-direction: row;
       flex-wrap: wrap;
       margin-top: 10px;
    
   }

  
   .clothe_size span{
       display: inline-block;
       width: 20px;
       height: 20px;
       border: 1px solid #c8cbcc;
       text-align: center;
       line-height: 20px;
       color: #888;
       margin: 5px;
       border-radius: 50%;
       font-size: 12px;
       transition: all 0.6s
   }
    .clothe_size span:hover{
         background: #f13232;
         color: white;
         cursor: pointer;
         border: none;
    }



    /* 商品大图片区域 */
    .clothe_big_img{
        margin: 0 auto;
        margin-top: 50px;
        width: 80%;
        height: 100%;
        padding: 50px;
        box-sizing: border-box;
        border: 2px dotted rgb(214, 208, 208);
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        
    }
.clothe_big_img h3{
    margin-top: 30px;
    text-align: center;
    color: #333;
}


    /* 区域分割线 */
		.hotSale_line{
		text-align: center;
		  margin:0 auto;
		  margin-top:30px;
		  width: 70%;
		  height: 40px;
		  line-height: 40px;
		  /*border-bottom: 1px solid #607d8b;*/
		  /*background-color: red;*/
	}
	.line{
		display: inline-block;
		width: 200px;
		height: 10px;
		border-bottom: 1px solid #607d8b;
		position: relative;
		top:-5px;
        
	}

	.hotSale_line_text{
		display: inline-block;
		color: #333;
		font-family:'SimHei','新宋体';

	}

    /* 这里也是大图区域来的喔 */
    .clothe_detail_img{
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        align-items: center;
        
    }
    .clothe_detail_img img{
        margin: 20px;
    }

    /* 返回按钮的样式 */
    .backGo{
        display: inline-block;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        text-decoration: none;
        width: 80px;
        height: 30px;
        background: #79ca8e;
        color: white;
        position: absolute;
        font-size: 15px;
        top: 145px;
        left :10px;
    }
    .backGo i{
        color: white;
        font-size:15px;
    }

    .backGo:hover{
        cursor: pointer;
        background: #607d8b;
    }
</style>


